.box{
    background-color: white;
}
.content{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.logo{
    background-image: url("../img/logo.png");
    width: 130px;
    height: 80px;
    float: left;
}
.content .nav-list{
    float: right;
    font-size: 20px;
}
.content .nav-list li{
    float: left;
    margin-left: 61px;
    line-height: 80px;
}
.color-red{
    color: #ff5a4e;
}
.content .nav-list last{
    margin-left: 106px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}
.banner{
    width: 1200px;
    margin: 0 auto;
}
.banner img{
    width: 1200px;
}

.hotproduct{
    height: 800px;
    width: 1200px;
    margin: 0 auto;
    background-color: #f2f2f2;
}
.hotproduct h1{
    font-size: 36px;
    color: #262626;
    padding-top: 102px;
    text-align: center;
}
.hotproduct .hb-list{
    height: 457px;
    padding-top: 90px;
    width: 1200px;
    margin: 0 auto;
}
.hotproduct .hb-list .hb-one,.hb-two,.hb-three{
    width: 326px;
    height: 457px;
    float: left;
}
.hb-one{
    background-color: #ffebe0;
    margin-left: 100px;
}
.hb-list .hb-one .hb-one-a,.hb-two-a,.hb-three-a{
    width: 300px;
    height: 200px;
    margin: 0 auto;
    background-color: #ffffff;
}
.hb-one-a h2,.hb-two-a h2,.hb-three-a h2{
    text-align: center;
    padding-top: 15px;
    color: #262626;
    font-size: 27px;
}
.hb-one-a p,.hb-two-a p,.hb-three-a p{
    text-align: center;
    color: #8d8d8d;
    font-size: 18px;
}
.hb-one-a span,.hb-two-a span,.hb-three-a span{
    width: 146px;
    height: 32px;
    margin: 25px;
    background-color: #e41e1e;
    color: #FFFFFF;
    position: absolute;
    margin-left: 80px;
    text-align: center;
    line-height: 32px;
}
.hb-two{
    background-color: #ebe8e8;
}
.hb-three{
    background-color: #e3ebea;
}
/*全网唯一家不败家的平台*/
.whole-network{
    margin: 0 auto;
    width: 1200px;
    height: 500px;
}
.whole-network h1{
    text-align: center;
    padding-top: 100px;
    font-size: 30px;
    color: #262626;
}
.whole-network p{
    text-align: center;
    font-size: 20px;
    color: #535353;
    margin-top: 25px;
}
/*总框*/
.wn-box{
    margin-top: 53px;
    width: 1200px;
    height: 370px;
    /*border: 1px solid red;*/
}
/*左侧部分*/
.wn-left{
    float: left;
    /*border: 1px solid red;*/
    margin-left: 135px;
    width: 377px;
    height: 300px;
}
.wn-left h2{
    text-align: center;
    font-size: 25px;
    color: #fc4441;
}
.wn-left .wn-left1,.wn-left2{
    float: left;
    margin-top: 33px;
    width: 119px;
    height: 220px;
    /*border: 1px solid black;*/
}
.wn-left2{
    float: right;
}
.wn-left .wn-left1-up,.wn-left2-up{
    width: 119px;
    height: 115px;
    /*border: 1px blue solid;*/
}
.wn-left1-up{
    background-image: url("../img/inde_icon.png");
    background-position: 1% 33%;
}
.wn-left2-up{
    background-image: url("../img/inde_icon.png");
    background-position: 15% 33%;
}
.wn-left1 .wn-left1-down h6,.wn-left2 .wn-left2-down h6{
     text-align: center;
     font-size: 10px;
    color: #fc4441;
    margin-top: 40px;
 }
.wn-left1-down p,.wn-left2-down p{
    margin-top: 1px;
    font-size: 7px;
}
.wn-box .vs{
    float: left;
    font-size: 88px;
    color: red;
    margin-top: 30px;
    margin-left: 150px;
    width: 200px;
    /*border: 1px pink solid;*/
}
/*右侧*/
.wn-right{
    float: left;
    height: 300px;
    margin-left: 165px;
    /*border: 1px red solid;*/
}
.wn-right h2{
    font-size: 20px;
    color: #262626;
}
.wn-right-up{
    width: 133px;
    height: 133px;
    background-image: url("../img/inde_icon.png");
    background-position: 28% 33%;
}
.wn-right h6{
    text-align: center;
    margin-top: 40px;
    color: #262626;
}
.wn-right p{
    text-align: center;
    margin-top: 0px;
    font-size: 17px;
    color: #262626;
}
/*玩法介绍*/
.play{
    margin: 0 auto;
    width: 1200px;
    margin-top: 100px;
    background-color: #f2f2f2;

}
.play h1{
    padding-top: 83px;
    font-size: 30px;
    color: #262626;
    text-align: center;
}
.play ul{
    overflow: hidden;
    margin-top: 46px;

}
.play ul li{
    float: left;
}
.play img{
    margin-left: 30px;
    margin-right: 53px;
}
.play .p-one{
    margin-left: 129px;
}
.play .p-one .p-one-up{
    width: 90px;
    height: 100px;
    background-image: url("../img/inde_icon.png");
    margin: 0 auto;
    background-position: 0% 0%;
}
.play .p-three .p-three-up{
    width: 100px;
    margin: 0 auto;
    height: 100px;
    background-image: url("../img/inde_icon.png");
    background-position: 11% 0%;
}
.play .p-five .p-five-up{
    width: 100px;
    margin: 0 auto;
    height: 100px;
    background-image: url("../img/inde_icon.png");
    background-position: 22% 0%;
}
.play .p-seven .p-seven-up{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-image: url("../img/inde_icon.png");
    background-position: 33% 0%;
}

.p-two,.p-four,.p-six{
    padding-top: 40px;
}
.play .play-box p{
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 100px;
}
.shop{
    margin: 0 auto;
    width: 1200px;
}
.shop h1{
    text-align: center;
    font-size: 38px;
    color: #262626;
    padding-top: 100px;
}
.shop p{
    text-align: center;
    font-size: 35px;
    color: #535353;
}
.shop .shop-icon{
    margin-top: 51px;
}
.shop .shop-icon  em {
    color: red;
}
.shop-icon .shop-left{
    display: inline-block;
    margin-left: 200px;
    /*border: 1px red solid;*/
 }
.shop-icon .shop-right{
    display: inline-block;
    /*border: 1px red solid;*/
}
.shop-icon .shop-left .shop-left-top{
    width: 119px;
    height: 115px;
    background-image: url("../img/inde_icon.png");
    background-position: 43% 33%;
}
.shop-icon .shop-left .shop-left-middle{
    width: 119px;
    height: 115px;
    background-image: url("../img/inde_icon.png");
    background-position: 57% 33%;
}
.shop-icon .shop-left .shop-left-bottom{
    width: 119px;
    height: 115px;
    background-image: url("../img/inde_icon.png");
    background-position: 71% 33%;
}
.shop-icon .shop-right .shop-right-top{
    width: 119px;
    height: 115px;
    background-image: url("../img/inde_icon.png");
    background-position: 85% 33%;
}
.shop-icon .shop-right .shop-right-middle{
    width: 119px;
    height: 115px;
    background-image: url("../img/inde_icon.png");
    background-position: 99% 33%;
}
.shop-icon .shop-right .shop-right-bottom{
    width: 119px;
    height: 115px;

}
.shop-icon .shop-right p,.shop-left p {
    font-size: 22px;
    line-height: 115px;
    margin: 0 auto;
}
.shop-car,.shop-iphone,.shop-game,.shop-goods,.shop-eat{
    overflow: hidden;
}
.shop-left-top,.shop-left-middle,.shop-left-bottom,.shop-right-top,.shop-right-middle,.shop-right-bottom{
    float: left;
    margin-bottom: 30px;
}
.shop-left p,.shop-right p{
    float: left;
    padding-left: 10px;
}
.welfare{
    width: 1200px;
    margin: 0 auto;
    background-color: #f2f2f2;
}
.welfare h1{
    font-size: 40px;
    text-align: center;
    color: #262626;
    padding-top: 100px;
}

.welfare>p{
    margin-top: 10px;
    font-size: 32px;
    text-align: center;
    color: #262626;
}
.wf-box{
    margin-top: 51px;
}
.wf-box p em{
    color: red;
    font-size: 24px;
}
.wf-box .wf-one,.wf-two,.wf-three{
    display: inline-block;
    margin-left: 130px;
}
.wf-box .wf-one-top{
    width: 220px;
    height: 220px;
    background-image: url("../img/inde_icon.png");
    background-position: 1% 97%;
}
.wf-box .wf-two-top{
    width: 220px;
    height: 220px;
    background-image: url("../img/inde_icon.png");
    background-position: 27% 97%;
}
.wf-box .wf-three-top{
    width: 220px;
    height: 220px;
    background-image: url("../img/inde_icon.png");
    background-position: 53% 97%;
}
.wf-one p,.wf-two p,.wf-three p{
    text-align: center;
    font-size: 19px;
    color: #262626;
    margin-top: 20px;
    padding-bottom: 100px;
}
.friend{
    width: 1200px;
    margin: 0 auto;
}
.friend h1{
    font-size: 40px;
    text-align: center;
    color: #262626;
    padding-top: 100px;
}
.friend>p{
    margin-top: 10px;
    font-size: 32px;
    text-align: center;
    color: #262626;
}
.friend .f-image{
    margin-top: 50px;
}
.friend .f-image img{
    width: 1200px;
}
/*底部*/
.footer{
    width: 1200px;
    margin: 0 auto;
    background-color: #f2f2f2;
    text-align: center;
    padding-top: 28px;
    padding-bottom: 30px;
}
.footer a{
    display: inline-block;
    color: #262626;
    font-size: 20px;
    width: 198px;
}
.footer p{
    color: #262626;
    margin-top: 20px;
    font-size: 18px;
}

